<template>
<div class="role">
    <!--按钮-->
    <div class="btns">
        <el-form size="small" inline style="text-align:right">
            <el-form-item>
              <el-input placeholder="请输入角色名" v-model="param.name">
              <el-button slot="append" icon="el-icon-search" @click="loadBaseRole">搜索</el-button> 
              </el-input>
            </el-form-item>
            <el-form-item>
              <!--el-button size="small" type="primary" icon="el-icon-search" @click="loadBaseRole">搜索</el-button-->
              <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" @click="toAddHandler">新增</el-button>
              <el-button size="small" type="primary" icon="el-icon-download" @click="downloadHandler">导出</el-button>
            </el-form-item>
        </el-form>  
    </div>
    <!--按钮-->
    <!--表格-->
    <el-table border height="400" style="width : 100%" size="small" :data="baseRole">
        <el-table-column type="index" :index="1" label="序号"></el-table-column>
        <el-table-column label="ID" prop="id" align="center"></el-table-column>
        <el-table-column label="角色名" prop="name" align="center"></el-table-column>
        <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" round icon="el-icon-edit-outline" @click="editHandler(scope.row)">修改</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" round @click="deleteHandler(scope.row)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
    <!--表格-->
 </div>
</template>
<script>
import {get,post,del} from '@/utils/request'
export default {
    data(){
        return {
            select:{},
            param:{},
            baseRole:[]
        }
    },
    //加载文件时的执行方法
    created(){
        this.loadBaseRole();
    },

    methods:{
        downloadHandler(){
            if(this.param.name){
                window.location.href = "http://39.106.31.187:8888/baseRole/download?name="+this.param.name;
            }else{
        window.location.href = "http://39.106.31.187:8888/baseRole/download";
            } 
        },
        editHandler(row){
            this.$router.push({
                path:"/role/roleCreate",
                query:row
            })
        },
        deleteHandler(row){
            this.$confirm("此操作将永久删除该数据，是否要继续操作？","提示",{
                confirmButtonText:"确定",
                cancelButtonText:"取消",
                type:"warning",   
            }).then(() => {
                let url = "http://39.106.31.187:8888/baseRole/deleteById";
                del(url,{ id: row.id }).then((resp) => {
                    this.$message({ type: "success",message: resp.message});
                    this.loadBaseRole();
                });
            });
        },

        toAddHandler(){
            this.$router.push("/role/roleCreate")
        },

        loadBaseRole(){
            let url = 'http://39.106.31.187:8888/baseRole/query'
            get(url,this.param).then((resp)=>{
                this.baseRole = resp.data;
            })
        }
    }
}
</script>
style <style scoped>
.btns {
    margin-bottom: .5em;
} 
</style>